<template>
    <div class="page-container">
      <transition name="fade" mode="out-in">
        <div :key="currentPage" class="page">
          {{ currentPage }}
        </div>
      </transition>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        pages: ['Page 1 content', 'Page 2 content', 'Page 3 content'],
        currentPageIndex: 0
      };
    },
    computed: {
      currentPage() {
        return this.pages[this.currentPageIndex];
      }
    },
    mounted() {
      setInterval(this.nextPage, 5000); // 每3秒翻一页
    },
    methods: {
      nextPage() {
        this.currentPageIndex = (this.currentPageIndex + 1) % this.pages.length;
      }
    }
  };
  </script>
  
  <style>
  .page-container {
    height: 800px; /* 假设页面高度为200px */
  }
  
  .page {
    padding: 20px;
    border: 1px solid #ccc;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }
  
  .fade-enter, .fade-leave-active {
    opacity: 0;
    transform: translateX(-20px);
  }
  .fade-enter, .fade-enter-active {
    opacity: 0;
    transform: translateX(20px);
  }
  </style>